<template>
  <div class="orders">
    <el-card>
      <template #header>
        <span>订单管理</span>
      </template>
      
      <el-table :data="orderList" style="width: 100%">
        <el-table-column prop="id" label="订单号" width="120"></el-table-column>
        <el-table-column prop="customer" label="客户"></el-table-column>
        <el-table-column prop="amount" label="金额"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" @click="viewOrder(scope.row)">查看</el-button>
            <el-button size="mini" type="success" @click="approveOrder(scope.row.id)">审批</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Orders',
  data() {
    return {
      orderList: [
        { id: 'ORD001', customer: '张三', amount: '¥1,200', status: '待审批', createTime: '2024-01-15 10:30' },
        { id: 'ORD002', customer: '李四', amount: '¥800', status: '已通过', createTime: '2024-01-15 09:15' },
        { id: 'ORD003', customer: '王五', amount: '¥2,100', status: '已拒绝', createTime: '2024-01-14 16:45' }
      ]
    }
  },
  methods: {
    getStatusType(status) {
      const typeMap = {
        '待审批': 'warning',
        '已通过': 'success',
        '已拒绝': 'danger'
      }
      return typeMap[status] || 'info'
    },
    viewOrder(order) {
      this.$message.info(`查看订单: ${order.id}`)
    },
    approveOrder(id) {
      this.$message.success(`审批订单: ${id}`)
    }
  }
}
</script>

<style scoped>
.orders { padding: 20px; }
</style>
